<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I Love U</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        .heart {
            position: absolute;
            pointer-events: none;
            animation: float 6s ease-in-out infinite, glow 1.5s ease-in-out infinite alternate;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) rotate(720deg);
                opacity: 0;
            }
        }
        
        @keyframes glow {
            0% {
                filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.7));
            }
            100% {
                filter: drop-shadow(0 0 20px rgba(255, 105, 180, 1));
            }
        }
        
        .center-text {
            position: relative;
            z-index: 100;
            font-size: 5rem;
            font-weight: bold;
            color: lightblue;
            text-shadow: 0 0 10px rgba(173, 216, 230, 0.7);
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="center-text">I LOVE U</div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Create hearts as soon as the page loads
            createHearts();
            
            // Continue creating hearts at intervals
            setInterval(createHearts, 300);
            
            function createHearts() {
                const heartsToCreate = 5;
                
                for (let i = 0; i < heartsToCreate; i++) {
                    setTimeout(() => {
                        const heart = document.createElement('div');
                        heart.classList.add('heart');
                        heart.innerHTML = '❤️';
                        heart.style.left = Math.random() * 100 + 'vw';
                        heart.style.bottom = '0';
                        heart.style.fontSize = (Math.random() * 30 + 20) + 'px';
                        heart.style.filter = 'hue-rotate(' + Math.random() * 360 + 'deg)';
                        heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
                        
                        document.body.appendChild(heart);
                        
                        // Remove the heart after animation completes
                        setTimeout(() => {
                            heart.remove();
                        }, 6000);
                    }, i * 100);
                }
            }
        });
    </script>
</body>
</html>